import {Button, NavBar, Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";
import axios from "axios";
import {ProductCard} from "react-vant";
import {Card} from "@nutui/nutui-react";
import '../css/Comment.css'
import moment from "moment/moment";

export default function Comment() {
    const navigate = useNavigate()
    const [userId, setUserId] = useState(sessionStorage.getItem('userId')||'670637e24b51aa7b2e437c1e')

    const [num, setNum] = useState(0)
    const [commentList, setCommentList] = useState([])
    const [btnText, setBtnText] = useState('全部')
    const [btnTextList,] = useState([
        '全部',
        '近期',
        '好评',
        '中评',
        '差评',
        '有图',
    ])
    const chooseBtn = (item, index) => {
        setNum(index)
        console.log(item, index)
        setBtnText(item)

    }
    const back = () => {
        navigate(-1)
    }
    const formatDate = (date) => {
        return moment(date).format('YYYY.MM.DD ')
    }
    const getCommentList = async () => {
// sessionStorage.setItem('userId', '670637e24b51aa7b2e437c1e')
        let {data: {list, code,total}} = await axios.get('/fxs/commentList', {
            params: {
                btnText: btnText,
                userId: userId,
            }
        })
        Toast.show({
            icon: 'loading',
            content: '加载中…',
            duration: 1000
        })
        if (code === 200) {
            setTimeout(() => {

                setCommentList(list)
                // setTotal(list.length)
                console.log(list)
            }, 2000)

        }
    }

    useEffect(() => {
        getCommentList()
    }, [btnText])
    useEffect(() => {

    },[commentList])
    return (
        <>
            <div className={'coupon-header'}>
                <NavBar onBack={back} style={{backgroundColor: '#e8e7e3', height: '5rem'}}>
                    我的评价
                </NavBar>
            </div>
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                flexWrap: 'wrap',
                width: '90%',
                margin: '1rem auto'
            }}>
                {btnTextList.map((item, index) => {
                    return (
                        <Button key={index} size={'mini'} shape='rounded'
                                style={{backgroundColor: num === index ? '#e8e7e3' : '#fff'}}
                                onClick={() => chooseBtn(item, index)}>{`${item}`}
                        </Button>
                    )
                })}
            </div>
            <div>
                {commentList.map((item, index) => {
                    return (
                        <div key={item._id} style={{
                            width: '90%',
                            minHeight: '20rem',
                            margin: '1rem auto',
                            border: '1px solid #e8e7e3',
                            padding: '1rem'
                        }}>
                            <div style={{display: 'flex', width: '100%', height: '3rem'}}>
                                <div><img src={item.userId.avatar} alt="" style={{
                                    width: '3rem',
                                    height: '3rem',
                                    borderRadius: '50%',
                                }}>{item.username}</img></div>
                                <p style={{marginLeft: '1rem', width: '100%'}}>{item.userId.username}</p>

                            </div>
                            <div style={{marginTop: '1rem'}}>
                                <p>{item.comment}</p>
                                <div style={{display: item.img ? 'block' : 'none',margin:'0 1rem '}}>
                                    {item.img.map((ele,index)=>{
                                        return(
                                            <img src={ele.url} alt="" style={{width:'5rem',height:'5rem'}} key={index}/>
                                        )
                                    })}
                                </div>
                            </div>
                            <div style={{margin: '1rem 0'}}>
                                <p>{formatDate(item.time)}</p>
                            </div>
                            <div>
                                <Card
                                    src={item.goodsId.img[0]}
                                    title={item.goodsId.name}
                                    price={item.goodsId.price}


                                />
                            </div>


                        </div>
                    )
                })}
            </div>
        </>
    )
}
